<template>
    <a-drawer title="设置滚动" width="30%" :visible="visible" :maskClosable="false" :body-style="{ paddingBottom: '80px' }" :closable="false" class="content_drawer">
        <span class="ant-upload-picture-card-wrapper" >
            <div class="ant-upload-list ant-upload-list-picture-card">
                <div class="ant-upload-list-picture-card-container" v-for="(pic ,pic_index) in pics"  :key="pic_index" >
                    <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card" :style="pic.select?'border: 5px solid #3783cc;':''">
                        <div class="ant-upload-list-item-info" @click="clickpic(pic)">
                            <span>
                                <a href="javacript:void(0);"  class="ant-upload-list-item-thumbnail">
                                    <img :src="pic.img" alt="image.png" class="ant-upload-list-item-image">
                                </a>
                            </span>
                        </div>
                        <span class="ant-upload-list-item-actions">
                            <a-icon type="eye-o" @click="showmodel(pic)" />
                        </span>
                    </div>
                </div>
            </div>
        </span>
        <a-modal v-model="modelvisible"  @ok="modelok" :footer="null" :centered="true">
            <img alt="example" :src="showpic" style="width: 100%;">
        </a-modal>
        <div
            :style="{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e8e8e8',
            padding: '10px 16px',
            textAlign: 'right',
            left: 0,
            background: '#fff',
            borderRadius: '0 0 4px 4px',
            }"
        >
            <a-button style="marginRight: 8px" @click="onCancel">
            Cancel
            </a-button>
            <a-button type="primary" @click="onClose">
            Submit
            </a-button>
        </div>
    </a-drawer>
</template>
<script>
    import Bus from '../../../src/bus.js';
    import $ from 'jquery';
    export default {
        data() {
            return {
                visible: false,
                pics:[],
                modelvisible:false,
                showpic:'',
                id:'',


            }
        },
        mounted() {
            Bus.$on('set_swaper', (id) => {
                this.init();
                this.visible = true
                this.id=id
                this.getpics();
            })
            this.init();
            
        },
        methods: {
            init() {
                this.pics=[]
                this.showpic=''
            },
            showmodel(pic){
                this.showpic=pic.img
                this.modelvisible = true;
            },
            modelok(){
                this.modelvisible = false;
            },
            clickpic(pic)
            {
                this.pics.forEach((element,index) => {
                    if(pic.index==element.index){
                        this.pics[index].select=true
                    }
                    else{
                        this.pics[index].select=false
                    }
                });
            },
            onClose() {
                let indexa=-1;
                this.pics.forEach((element,index) => {
                    if(element.select==true){
                        indexa=index
                    }
                });
                if(indexa==-1){
                    this.$message.error('请选择一个图片作为滚动图片');
                    return 
                }
                let that=this;
                let ajaxSet={
                    type:"post",
                    async:true,
                    dataType:"json",
                    url:window.Glod.ajax+"xzqh/update_news_swiper?",
                    data:{
                        swiper:'true',
                        id:this.id,
                        pic:this.pics[indexa].img
                    }
                }
                $.ajax(ajaxSet)
                .then(databack=>{
                    if(databack.status==true){
                        Bus.$emit('refresh_edit_news');
                    }
                });
                this.visible = false
                
            },
            onCancel() {
                this.visible = false
            },
            clupics(result){
                result.forEach((element,index)=>{
                    this.pics.push({
                        img:element.img,
                        index:index,
                        select:false,
                    })
                })
            },
            getpics(){
                this.pics=[];
                let that=this;
                let ajaxSet={
                    type:"post",
                    async:true,
                    dataType:"json",
                    url:window.Glod.ajax+'xzqh/search_news_id_pics?', 
                    data:{
                        id:this.id,
                    }
                }
                $.ajax(ajaxSet)
                .then(databack=>{
                    if(databack.status==true){
                        that.clupics(databack.result)
                    }
                });
            },
        }


    }
</script>